<div class="layui-card">
    <div class="layui-card-header">
        <span class="layui-breadcrumb pull-right">
            <a href="#!console">首页</a>
            <a><cite>登录量</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <form class="layui-form toolbar">
            搜索:
            <div class="layui-inline">
                <input type="text" class="layui-input time" id="time">
            </div>
            <button id="loginCount-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </form>
        <!--数据柱状图-->
        <div id="login-column" style="min-width:400px;height:400px"></div>
    </div>
</div>
<script>

    var returnData = [];
    layui.use(['config', 'laydate', 'util', 'admin'], function () {
        var laydate = layui.laydate;
        var config = layui.config;
        var util = layui.util;
        var admin = layui.admin;
        //日期时间选择器
        laydate.render({
            elem: '#time' //指定元素
            , type: 'date'
            , format: 'yyyy-MM-dd'
            , max: 1
        });



        // 搜索按钮点击事件
        $('#loginCount-btn-search').click(function () {
            var time = $('#time').val();
            if (time == null) {
                layer.msg('请选择日期', { icon: 1, time: 500 });
                return;
            }
            admin.req('api-select/loginCount/' + time, {}, function (data) {
                if(data.code != 0){
                    return;
                }
                returnData.length = 24;
                for(var i = 0;i<returnData.length;i++){
                    returnData[i] = 0;
                }
                var ps = data.data;
                for (var i = 0; i < ps.length; i++) {
                    returnData[ps[i].timePoint] = ps[i].count;
                }

                Highcharts.chart('login-column', {
                    chart: {
                        type: 'column'
                    }
                    , credits: {
                        enabled: false // 禁用版权信息
                    }
                    , title: {
                        text: '登录量'
                    }
                    , xAxis: {
                        categories: [
                            '0:00-1:00', '1:00-2:00', '2:00-3:00', '3:00-4:00', '4:00-5:00', '5:00-6:00', '6:00-7:00', '7:00-8:00', '8:00-9:00', '9:00-10:00', '10:00-11:00', '11:00-12:00', '12:00-13:00'
                            , '13:00-14:00', '14:00-15:00', '15:00-16:00', '16:00-17:00', '17:00-18:00', '18:00-19:00', '19:00-20:00', '20:00-21:00', '21:00-22:00', '22:00-23:00', '23:00-24:00'
                        ],
                        crosshair: true
                    }
                    , yAxis: {
                        min: 0,
                        title: {
                            text: '人次'
                        }
                    }
                    , tooltip: {
                        // head + 每个 point + footer 拼接成完整的 table
                        headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                        pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                            '<td style="padding:0"><b>{point.y:f} 人次</b></td></tr>',
                        footerFormat: '</table>',
                        shared: true,
                        useHTML: true
                    }
                    , plotOptions: {
                        column: {
                            borderWidth: 0
                        }
                    }
                    , series: [{
                        name: '登录',
                        data: returnData
                }]
                });
                }, 'GET');
        });

    });

</script>